import React, { useEffect, useState } from 'react'
import { DatePicker, Button, Form, Select, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { getAdmList } from '&/api/electricity'
import dayjs from 'dayjs'

const Filter = ({ handleQuery, paramsData, setParamsData, loading }) => {
  const [countValues, setCountValues] = useState([])

  useEffect(() => {
    getAdmListData()
  }, [])

  const click = () => {
    handleQuery(paramsData)
  }

  const onQueryChange = (v, t) => {
    if (t === 'start_time') {
      setParamsData((state) => ({
        ...state,
        start_time: v ? v.format('YYYY-MM-DD HH:00:00') : undefined,
      }))
    } else if (t === 'end_time') {
      setParamsData((state) => ({
        ...state,
        end_time: v ? v.format('YYYY-MM-DD HH:00:00') : undefined,
      }))
    } else if (t == 'area') {
      setParamsData((state) => ({
        ...state,
        county_id: v,
      }))
    } else if (t == 'name') {
      setParamsData((state) => ({
        ...state,
        ent_name: v,
      }))
    }
  }

  const getAdmListData = async () => {
    const res = await getAdmList({ adm_level: '3' })
    res.unshift({ county_id: -1, county_name: '全部' })
    setCountValues(res)
  }

  return (
    <Form layout="inline">
      <Form.Item label="开始时间">
        <DatePicker
          showTime={{ format: 'HH:00' }}
          value={paramsData.start_time ? dayjs(paramsData.start_time) : undefined}
          format={'YYYY-MM-DD HH:00:00'}
          onChange={(v) => {
            onQueryChange(v, 'start_time')
          }}
        />
      </Form.Item>
      <Form.Item label="结束时间">
        <DatePicker
          showTime={{ format: 'HH:00' }}
          value={paramsData.end_time ? dayjs(paramsData.end_time) : undefined}
          format={'YYYY-MM-DD HH:00:00'}
          onChange={(v) => {
            onQueryChange(v, 'end_time')
          }}
        />
      </Form.Item>
      <Form.Item label="区域选择">
        <Select
          placeholder={`请选择`}
          value={paramsData?.county_id}
          onChange={(v) => onQueryChange(v, 'area')}
        >
          {countValues &&
            countValues.map((item, index) => {
              return (
                <Select.Option key={index} value={item.county_id}>
                  {item.county_name}
                </Select.Option>
              )
            })}
        </Select>
      </Form.Item>
      <Form.Item label="企业名称">
        <Input
          placeholder="请输入企业名称"
          onChange={(e) => onQueryChange(e.target.value, 'name')}
        />
      </Form.Item>
      <Form.Item>
        <Button
          type="primary"
          onClick={() => click()}
          loading={loading}
          icon={<SearchOutlined />}
        >
          查询
        </Button>
      </Form.Item>
    </Form>
  )
}

export default Filter
